<template>
  <div class="page adaofu-exchange">
    <div class="container">
      <div class="history-btn">
        <i @click="onHistoryBtnClick"></i>
      </div>
      <p class="total">已获得鲜花数量：{{flower}}</p>
      <p class="tips">Tips: 店主记得要在截止日期前兑换相应礼品哦~</p>
      <div class="list">
        <div class="list-container">
          <div class="list-item">
            <div class="avatar">
              <img :src="icons.defaultImg" mode="aspectFit"/>
            </div>
            <div class="detail">
              <div class="name">阿道夫洗护产品（中样）1份</div>
              <div class="bottom">
                <div class="count">限量10000份，先到先得哦！</div>
                <div class="btn" @click="onDefaultExchangeBtnClick">兑换</div>
              </div>
              <div class="pao" :style="pao" v-if="showPao"></div>
            </div>
          </div>
          <div class="list-item" v-for="(item, i) in giftList" :key="i">
            <div class="avatar">
              <img :src="item.image" mode="aspectFit"/>
            </div>
            <div class="detail">
              <div class="name">{{item.name}}</div>
              <div class="bottom">
                <div class="count">{{item.flowers}}朵鲜花</div>
                <div class="btn" @click="onBtnClick(item)">兑换</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <empty-tip v-if="showEmptyTip"></empty-tip>
      <a class="load-more" v-if="showNoMore">没有更多了</a>
      <a class="load-more" v-if="showLoadMore">加载中...</a>
    </div>
    <alert11-dialog :show.sync="showAlert11Dialog" :item="currentItem" :resultType="resultType" :resultData="resultData"></alert11-dialog>
  </div>
</template>

<script>
import mixins from 'comp/mixins'
import Alert11Dialog from 'comp/alert11-dialog'
import EmptyTip from 'comp/empty-tip'

export default {
  mixins: [mixins],
  components: {
    Alert11Dialog,
    EmptyTip
  },
  data () {
    return {
      icons: {
        btnBg: `${require('static/images/exchange/btn.png')}`,
        defaultImg: `${require('static/images/exchange/default.png')}`,
        pao: `${require('static/images/exchange/pao.png')}`
      },
      giftList: [],
      flower: 0,
      showAlert11Dialog: false,
      currentItem: {},
      resultData: {},
      resultType: '',
      page: 1,
      showEmptyTip: false,
      showNoMore: false,
      showLoadMore: false,
      isOpenGift: '',
      showPao: false,
    }
  },
  computed: {
    bg () {
      return `background-image: url(${this.icons.bg});`
    },
    add () {
      return `background-image: url(${this.icons.add});`
    },
    btnBg () {
      return `background-image: url(${this.icons.btnBg});`
    },
    pao () {
      return `background-image: url(${this.icons.pao});`
    },
  },
  onReachBottom () {
    // 页面上拉触底事件的处理函数
    if (this.showLoadMore) {
      this.getPageData()
    }
  },
  mounted () {
    this.resetData()
    this.getPageData()
  },
  methods: {
    async getPageData () {
      let page = this.page
      const res = await this.$store.dispatch('getGift', {
        page,
        rows: 30
      })

      const arr1 = this.giftList
      const arr2 = res.data.list
      if (arr1.length === 0 && arr2.length === 0) {
        // 暂无记录
        this.showEmptyTip = true
      } else {
        if (arr2.length < 30) {
          // 没有更多了
          this.showNoMore = true
          this.showLoadMore = false
        } else {
          // 加载中...
          this.showLoadMore = true
        }
      }
      this.giftList = arr1.concat(arr2)
      this.page = ++page

      this.flower = res.account.flowers
      this.isOpenGift = res.account.opengift
    },
    async onBtnClick (item) {
      this.currentItem = item
      if (item.flowers > this.flower) {
        this.resultData = {
          message: '非常抱歉，您的鲜花数量还不足以兑换这个奖品呢，请继续加油经营店铺，以获得更多的鲜花哦~'
        }
        this.resultType = 'error'
        this.showAlert11Dialog = true
      } else {
        if (item.type === '2') {
          this.doExchange(item.gift_id)
        } else {
          const contactRet = await this.$store.dispatch('getPlayerContact')
          // 已填写资料才可以兑换，否则引导填写资料
          if (contactRet.data && contactRet.data.phone) {
            this.doExchange(item.gift_id)
          } else {
            wx.showModal({
              title: '提示',
              content: '你先填写资料',
              confirmText: '确认',
              cancelText: '残忍拒绝',
              success: (res) => {
                if (res.confirm) {
                  wx.navigateTo({
                    url: '/pages/form/main?from=exchange'
                  })
                }
              }
            })
          }
        }
      }
    },
    async doExchange (giftId) {
      const ret = await this.$store.dispatch('exchangeGift', {
        gift_id: giftId
      })
      if (ret.data) {
        if (ret.data.error) {
          // 兑换失败
          this.resultData = ret.data
          this.resultType = 'error'
          this.showAlert11Dialog = true
        } else {
          this.flower = ret.account.flowers
          this.resultType = 'success'
          this.showAlert11Dialog = true
        }
      }
    },
    onHistoryBtnClick () {
      wx.navigateTo({
        url: '/pages/exchange-history/main',
      })
    },
    /**
     * 点击默认礼品
     */
    onDefaultExchangeBtnClick () {
      if (this.isOpenGift === '1') {
        // 已获取开店礼包，提示你已兑换过该礼品
        this.showPao = true
      } else {
        // 未获取开店礼包
        wx.navigateTo({
          url: '/pages/form/main?from=shopOpen'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.adaofu-exchange {
  .container {
    position: relative;
    min-height: 100%;
    min-height: 100vh;
    background: url("../../../static/images/wall-bg.png") repeat center center;
    background-size: 72rpx 60rpx;
  }
  .total {
    font-size: 35rpx;
    color: #260000;
    padding: 30rpx 90rpx 0;
  }
  .tips {
    font-size: 25rpx;
    color: #991a10;
    line-height: 44rpx;
    padding: 5rpx 90rpx 0;
  }
  .history-btn {
    position: relative;
    width: 100%;
    height: 50rpx;
    i {
      position: absolute;
      top: 10rpx;
      right: 20rpx;
      width: 177rpx;
      height: 50rpx;
      background: url("../../../static/images/exchange/btn2.png") no-repeat center center;
      background-size: contain;
    }
  }
  .list {
    &-container {
      width: 597rpx;
      margin: 20rpx auto;
    }
    &-item {
      display: flex;
      align-items: center;
      width: 537rpx;
      height: 178rpx;
      background: url("../../../static/images/exchange/bg.png") no-repeat center center;
      background-size: contain;
      padding: 0 40rpx 0 30rpx;
      margin-bottom: 15rpx;
      .avatar {
        width: 117rpx;
        height: 117rpx;
        background-color: #fff;
        border-radius: 5rpx;
        img {
          display: block;
          width: 117rpx;
          height: 117rpx;
        }
      }
      .detail {
        flex: 1;
        width: 100%;
        margin-left: 20rpx;
        position: relative;
        .name {
          font-size: 28rpx;
          color: #260000;
          line-height: 34rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 5rpx;
        }
        .count {
          font-size: 26rpx;
          color: #e24040;
          padding-top: 8rpx;
          line-height: 26rpx;
        }
        .btn {
          width: 101rpx;
          height: 44rpx;
          background: url("../../../static/images/exchange/btn.png") no-repeat center center;
          background-size: contain;
          color: #fff;
          font-size: 24rpx;
          text-align: center;
          line-height: 44rpx;
        }
        .pao {
          position: absolute;
          top: -25rpx;
          right: -25rpx;
          display: block;
          width: 169rpx;
          height: 97rpx;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
        }
      }
    }
  }
  .load-more {
    font-size: 24rpx;
    color: #991a10;
    text-align: center;
    padding: 30rpx 0 70rpx;
  }
}
</style>
